$top-menu-letf: 64px;

.learun-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1026;
    width: 100%;
    padding: 0 8px 0 16px;
    height: $header-height;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $color-type-black;

    .el-avatar {
        background-color: $primary-color;
    }

    &:after {
        content: ' ';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: $text-color;
    }

    .el-dropdown {
        color: #fff;
    }

    & &--icon-btn {
        position: relative;
        display: flex;
        width: 40px;
        height: 24px;
        font-size: 14px !important;
        color: $text-color-secondary;
        cursor: pointer;
        justify-content: center;
        align-items: center;

        &-wraper{
            position: relative;
        }

        &:hover {
            color: $background-color;
        }
    }

    .top-menu {
        position: relative;
        flex-grow: 2;
        width: 100%;
        padding-left: $top-menu-letf;
        overflow: hidden;
        display: flex;
        align-items: center;

    }

    &__collapse{
        font-size: 20px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}